<template>
  <view class="page">
    <view v-for="(item, index) in orderDetail.skuList" :key="index">
      <view class="goods-box-single">
        <image class="goods-img" :src="item.img" mode="aspectFill"></image>
        <view class="right">
          <text class="title clamp">{{item.spuTitle}}</text>
          <text class="attr-box">{{item.title}} x {{item.num}}</text>
          <text class="price">{{item.price / 100.0}}</text>
        </view>
      </view>
      <view class='appraise-title appraise-star-view'>
        <text>宝贝评分</text>
        <view class="appraise-star-view">
          <text class="appraise-star" v-for="(value,key) in stars" :key="key" :class="key < orderDetail.skuList[index].score ? 'active' : ''" @tap="chooseStar(value,index)"></text>
        </view>
      </view>
      <view class="appraise-body">
        <textarea placeholder="请输入评价(可空)..." v-model="item.content" class="appraise-textare" />
      </view>
      <view class="appraise-body appraise-uploader">
        <view class="uni-uploader">
          <view class="uni-uploader-head">
            <view class="uni-uploader-title" style="color: #6f6f74;">晒一晒</view>
            <view class="uni-uploader-info">{{item.imgs.length}}/8</view>
          </view>
          <view class="uni-uploader-body">
            <view class="uni-uploader__files">
              <block v-for="(image,imgIndex) in item.imgs" :key="imgIndex">
                <view class="uni-uploader__file" style="position: relative;">
                  <image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
                  <view class="close-view" @click="close(item, index, imgIndex)">x</view>
                </view>
              </block>
              <view class="uni-uploader__input-box" v-show="imageList.length < 8">
                <view class="uni-uploader__input" @tap="chooseImg(item,index)"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <button type="primary" class="appraise-submit" @tap="send">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stars: [1, 2, 3, 4, 5],
      imageList: [],
      sendDate: {
        score: 0,
        content: '',
        contact: '',
      },
      orderDetail: {
        skuList: [],
      },
      appraiseRequest: {
        appraiseDTOList: [],
      },
    }
  },
  onLoad(option) {
    const that = this
    uni.showLoading({
      title: '正在加载',
    })

    that.$api
      .request(
        'order',
        'getOrderDetail',
        {
          orderId: option.orderid,
        },
        (failres) => {
          uni.hideLoading()
          that.$api.msg(failres.errmsg)
        }
      )
      .then((res) => {
        uni.hideLoading()
        that.orderDetail = res.data
        that.orderDetail.skuList.forEach((item) => {
          item.score = 0
          item.content = ''
          item.imgs = []
        })
      })
  },
  methods: {
    close(item, index, imgIndex) {
      item.imgs.splice(imgIndex, 1)
      this.orderDetail.skuList.splice(index, item)
    },

    chooseImg(item, index) {
      //选择图片
      const that = this
      that.$api.uploadImg((res) => {
        item.imgs.push(res)
        that.orderDetail.skuList.splice(index, that.orderDetail.skuList[index])
      })
    },
    chooseStar(e, index) {
      //点击评星
      const that = this
      that.orderDetail.skuList[index].score = e
      that.orderDetail.skuList.splice(index, that.orderDetail.skuList[index])
    },
    previewImage() {
      //预览图片
      uni.previewImage({
        urls: this.imageList,
      })
    },
    send() {
      //发送反馈
      const that = this
      let requestItems = []
      that.orderDetail.skuList.forEach((item) => {
        if (item.score <= 0) {
          that.$api.msg('请为所有宝贝点上星星')
          return
        }

        requestItems.push({
          skuId: item.skuId,
          spuId: item.spuId,
          score: item.score,
          content: item.content,
          imgUrl: item.imgs.length > 0 ? item.imgs.join(',') : '',
        })
      })

      that.appraiseRequest.orderId = that.orderDetail.id
      that.appraiseRequest.appraiseDTOList = requestItems

      that.$api
        .request('appraise', 'create', {
          appraiseRequestDTO: JSON.stringify(that.appraiseRequest),
        })
        .then((res) => {
          that.$api.msg('评价成功！')
          that.$api.prePage().loadData('refresh')
          uni.navigateBack()
        })
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
@font-face {
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf')
    format('truetype');
}
view {
  font-size: 28upx;
}
.input-view {
  font-size: 28upx;
}
.close-view {
  text-align: center;
  line-height: 14px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ff5053;
  color: #ffffff;
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 12px;
}
/* 上传 */
.uni-uploader {
  flex: 1;
  flex-direction: column;
}
.uni-uploader-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.uni-uploader-info {
  color: #b2b2b2;
}
.uni-uploader-body {
  margin-top: 16upx;
}
.uni-uploader__files {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.uni-uploader__file {
  margin: 10upx;
  width: 210upx;
  height: 210upx;
}
.uni-uploader__img {
  display: block;
  width: 210upx;
  height: 210upx;
}
.uni-uploader__input-box {
  position: relative;
  margin: 10upx;
  width: 208upx;
  height: 208upx;
  border: 2upx solid #d9d9d9;
}
.uni-uploader__input-box:before,
.uni-uploader__input-box:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.uni-uploader__input-box:before {
  width: 4upx;
  height: 79upx;
}
.uni-uploader__input-box:after {
  width: 79upx;
  height: 4upx;
}
.uni-uploader__input-box:active {
  border-color: #999999;
}
.uni-uploader__input-box:active:before,
.uni-uploader__input-box:active:after {
  background-color: #999999;
}
.uni-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/*问题反馈*/
.appraise-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20upx;
  color: #6f6f74;
  background-color: #ffffff;
  font-size: 28upx;
}
.appraise-star-view.appraise-title {
  justify-content: flex-start;
  margin: 0;
}
.appraise-quick {
  position: relative;
  padding-right: 40upx;
}
.appraise-quick:after {
  font-family: uniicons;
  font-size: 40upx;
  content: '\e581';
  position: absolute;
  right: 0;
  top: 50%;
  color: #bbb;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.appraise-body {
  background: #fff;
}
.appraise-textare {
  height: 200upx;
  font-size: 28upx;
  line-height: 34upx;
  width: 100%;
  box-sizing: border-box;
  padding: 20upx 30upx 0;
}
.appraise-input {
  font-size: 34upx;
  height: 50upx;
  min-height: 50upx;
  padding: 15upx 20upx;
  line-height: 50upx;
}
.appraise-uploader {
  padding: 22upx 20upx;
}
.appraise-star {
  font-family: uniicons;
  font-size: 40upx;
  margin-left: 6upx;
}
.appraise-star-view {
  margin-left: 20upx;
}
.appraise-star:after {
  content: '\e408';
}
.appraise-star.active {
  color: #ffb400;
}
.appraise-star.active:after {
  content: '\e438';
}
.appraise-submit {
  background: #007aff;
  color: #ffffff;
  margin: 20upx;
}
/* 单条商品 */
.goods-box-single {
  display: flex;
  padding: 20upx;

  .goods-img {
    display: block;
    width: 120upx;
    height: 120upx;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 30upx 0 24upx;
    overflow: hidden;

    .title {
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      line-height: 1;
    }

    .attr-box {
      font-size: $font-sm + 2upx;
      color: $font-color-light;
      padding: 10upx 12upx;
    }

    .price {
      font-size: $font-base + 2upx;
      color: $font-color-dark;

      &:before {
        content: '￥';
        font-size: $font-sm;
        margin: 0 2upx 0 8upx;
      }
    }
  }
}
</style>
